<template>
  <div class="descriptions-item">
    <div class="descriptions-item__label">
      <span>{{ label }}</span>

      <el-tooltip v-if="tip" :content="tip">
        <el-icon class="cursor-pointer">
          <QuestionFilled/>
        </el-icon>
      </el-tooltip>

      <span>：</span>
    </div>
    <div class="descriptions-item__value">
      <div v-if="value">{{ value }}</div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'AppDescriptionsItem',
  props: {
    label: {
      type: String,
      required: true,
    },
    tip: {
      type: String,
    },
    value: {
      type: String,
    },
  },
});
</script>

<style scoped>
.descriptions-item {
  @apply text-base flex items-center;

  .descriptions-item__label {
    @apply shrink-0 text-[#515A6E];
    @apply flex items-center gap-x-1;
  }

  .descriptions-item__value {
    @apply flex-1 pl-3 overflow-hidden text-[#515A6EFF]
  }
}
</style>